<template slot-scope="scope">
  <div class="login_container">
    <!-- title：对话框左上角题目 v-model：控制对话框显示与隐藏 -->
    <el-dialog v-model="loginStore.show" title="">
      <div class="content">
        <el-row>
          <!-- 手机短信登录 -->
          <el-col :span="12">
            <div class="login">
              <h3>手机短信登录</h3>
              <el-form>
                <el-form-item>
                  <el-input v-model="loginParam.phoneNumber" class="inputstyle" placeholder="请输入手机号码"
                            :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="loginParam.captcha" class="inputstyle" placeholder="请输入验证码"
                            :prefix-icon="Lock"></el-input>
                  <el-button class="getcode" @click="sendCode"><span>发送验证码</span></el-button>
                </el-form-item>
                <el-form-item class="botm">
                  <el-checkbox v-model="checked" label="我已阅读并同意服务条款、隐私政策" size="large"/>
                  <button @click.prevent="userLogin" class="btn">注册登录</button>
                  <p style="display: flex;align-items: center;margin-top: 2vw;">
                    其他登录方式：
                    <svg t="1710950919655" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2667" width="32" height="32">
                      <path
                          d="M399.84 615.936c-22.816 0-43.808 18.784-44.161 39.488-0.288 17.664 14.56 31.105 34.464 31.105 23.681 0.032 43.488-17.793 43.647-39.232 0.16-18.272-14.112-31.361-33.952-31.361z"
                          p-id="2668"></path>
                      <path
                          d="M456.608 600.193c-6.783 3.328-13.312 8.224-17.984 14.144-0.992 1.28 5.952 8.833 11.584 16.928 7.232-7.936 13.76-12.512 16.16-18.688 1.056-2.656-8.64-12.96-9.76-12.384z"
                          p-id="2669"></path>
                      <path
                          d="M599.904 510.432c-11.008-6.88-22.848-12.64-34.943-17.535-40.48-16.192-82.944-20.992-126.112-17.216-65.28 5.664-125.567 24.896-172.448 73.312-54.368 56.096-47.008 127.103 16.992 171.616 43.328 30.081 92.512 40.416 144.48 39.168 9.44 0 18.912 0.736 28.289-0.129 59.168-5.664 113.664-23.616 158.816-63.648 65.984-58.4 59.36-138.816-15.072-185.568zM526.688 675.328c-22.464 34.048-62.24 54.72-105.44 54.944-54.464 0.352-95.328-30.24-102.56-77.824-1.6-9.728-1.153-20.416 1.056-29.952 10.976-46.688 43.296-72.768 87.296-84.544 43.456-11.52 83.872-4 115.488 30.528 26.176 28.576 27.232 72.128 4.16 106.848z"
                          p-id="2670"></path>
                      <path
                          d="M512.032 0c-282.784 0-512.032 229.247-512.032 512s229.247 512 512 512c282.751 0 512-229.247 512-512 0-282.751-229.216-512-511.968-512zM756.192 664.864c-43.744 67.296-110.944 100.672-186.016 119.072-36.32 8.96-74.24 11.712-93.952 14.721-93.088-2.304-165.088-16.064-230.015-56.416-81.824-50.848-105.664-127.040-62.88-213.44 45.951-92.672 117.44-161.216 211.264-205.28 17.408-8.16 37.216-12.8 56.32-15.168 39.36-4.896 62.335 17.44 61.344 57.056-0.224 8.672-2.177 17.216-2.687 25.952-0.383 7.456 0.16 15.040 0.352 22.528 7.648-1.248 15.36-2.048 22.848-3.713 30.337-6.496 60.352-17.344 90.912-18.976 53.056-2.816 76.832 29.313 60.704 79.712-6.944 21.472-1.76 28.704 18.305 35.904 75.456 27.2 97.184 90.912 53.504 158.048zM716.608 382.335c-12.48-15.872-40.8-19.552-49.76-19.648-13.248-0.096-23.935-10.944-23.808-24.16 0.096-13.185 10.816-23.776 23.935-23.776h0.192c5.856 0 58.368 1.504 87.104 37.92 11.393 14.432 23.072 40.096 13.824 80.032-2.56 11.137-12.448 18.624-23.36 18.624-1.76 0-3.552-0.224-5.376-0.672-12.929-2.976-20.96-15.872-17.984-28.736 4.032-17.472 2.464-30.432-4.768-39.584zM857.696 460.8c-1.888 11.776-12.032 20.288-23.681 20.288-1.184 0-2.496-0.16-3.744-0.352-13.056-2.016-21.984-14.304-19.968-27.392 8.896-56.608-0.16-100.64-27.040-130.72-46.784-52.416-132.544-49.312-133.408-49.312-13.376 0.544-24.447-9.696-25.024-22.88-0.544-13.216 9.76-24.416 22.944-25.024 4.448-0.16 109.441-3.84 171.264 65.248 36.864 41.376 49.856 98.624 38.656 170.144z"
                          p-id="2671"></path>
                    </svg>
                  </p>
                </el-form-item>
              </el-form>
            </div>
          </el-col>

          <!-- 微信扫码登录 -->
          <el-col :span="12">
            <div class="scan">
              <h3>扫码登录</h3>
              <p>使用微信快速扫码登录</p>
              <div class="QRcode" style="width:20rem;height:20rem">
                <img :src="loginParam.imageUrl" alt="">
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 底部提醒 -->
        <el-row class="bottom_content">
          <p>登录视您已同意第三方账号绑定协议、服务条款、隐私政策</p>
        </el-row>

      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Login" lang="ts">
//获取useLoginStore仓库的数据（setup）可以控制login组件对话框的显示与隐藏
import {useLoginStore} from '@/store/login_data';
import {getCaptcha, getQrcode, getWeixinToken, login} from "@/api/login/index.ts"
//引入element-plus图标
import {User, Lock} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ref, reactive, onMounted, watch, onBeforeMount} from 'vue'

let loginStore = useLoginStore();
let router = useRouter();
const checked = ref(false)
// const phoneNumber = ref('')

//收集表单数据——手机号码
let loginParam = reactive({
  phoneNumber: '',
  captcha: "",
  imageUrl: "",
  tempUserId: "",
  weixinToken: ""
});
let timer = null;

onBeforeMount(() => {
  /*这段写到弹出层打开里*/
  watch(() => loginStore.show, async (nv, ov) => {
    if (nv) {

      let data = await getQrcode()
      loginParam.imageUrl = data.qrUrl
      loginParam.tempUserId = data.tempUserId;
      timer = setInterval(async () => {
        let data: string = await getWeixinToken(loginParam.tempUserId);
        if (data) {
          loginParam.weixinToken = data as string;
          loginStore.token = data as string;
          localStorage.setItem("Token", data);
          clearInterval(timer);
          router.push({
            path: "/home",
          })
        }

        console.log(data)
      }, 1500)
    } else {
      clearInterval(timer);


    }


  })


})

//获取验证码按钮的回调
const sendCode = async () => {
  //通知pinia仓库存储验证码
  await getCaptcha(loginParam.phoneNumber);

}

const userLogin = async () => {
  if (checked) {
    let data: any = await login(loginParam.phoneNumber, loginParam.captcha);
    loginStore.token = data.token;
    localStorage.setItem("Token", data.token);
     router.push({
      path: "/home",
    })
  } else {
    window.alert("请同意相关条款")
  }


}


</script>
<style scoped lang="scss">
.login_container {
  display: flex;
  justify-content: center;
  align-items: center;

  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 95%;

  }


  .content {
    background-color: #fff;
    height: auto;
    position: relative;

    h3 {
      margin-bottom: 2.5vw;
      font-weight: bold;
    }

    .login {
      padding: 4.1667vw;

      :deep(.el-input .el-input__icon) {
        width: 2.3rem;
      }

      :deep(.el-icon svg) {
        height: 1.5rem;
        width: 1.5rem;
        font-size: 18px;
      }

      .getcode {
        height: 2.8vw;
        width: 3vw;
        margin-top: 0px;
        margin-left: 1vw;
      }

      .btn {
        margin-top: 2vw;
        border-radius: 1.0417vw;
        border: solid black .1042vw;
        width: 15vw;
        height: 3.125vw;
        background-color: #fff;
        justify-content: center;
        font-size: .8333vw;
        font-weight: 700;
        letter-spacing: 0.1vw;
        cursor: pointer;
        clear: both;
      }

      .btn:hover {
        background-color: #2997ff;
      }

      .inputstyle {
        width: 70%;
        height: 2.8vw;

        ::-webkit-input-placeholder {
          font-size: 1vw;
        }


      }

      .botm {
        display: flex;
        justify-content: left;
        flex-direction: column;
        align-items: center;
        margin-top: 3vw;


      }
    }

    .scan {
      padding: 4vw;
      display: flex;
      flex-direction: column;
      justify-content: left;

      .QRcode {
        background-color: #fff;
        width: 16vw;
        height: 16vw;
        border: 1.6px solid #d3d9e4;
        border-radius: 1.3vw;
        margin-top: 2.5vw;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          margin-top: 2.5vw;
          width: 14vw;
          height: 14vw;
        }
      }
    }

    .bottom_content {
      background-color: #fff;
      height: 3vw;
      display: flex;
      justify-content: center;

      p {
        color: #999999;
      }
    }
  }
}
</style>@/store/login_data